<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>menubutton 测试</title>
<link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
<link href="../../../button/demo/assets/custombutton.css" rel="stylesheet"/>
<link href="menubutton.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menuitem.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/submenu.css" rel="stylesheet"/>
<style>
    .ks-menu {
        background: white;
        border: 1px solid red;
    }

    li {
        padding: 5px;
        border: 1px solid white;
    }
</style>
</head>
<body>

<h1 id="describe">menu 测试</h1>
<h2>设计说明</h2>
<ol>
    <li>支持键盘，鼠标互操作</li>
    <li>符合 wai-aria 规范</li>
    <li>构建组件层次</li>
</ol>

<h2>使用说明</h2>
<ol>
    <li>
        tab 移动焦点到按钮：按钮周边粉框
    </li>
    <li>
        按钮获得焦点时点击上或下键，弹出菜单
        <ol>
            <li>或点击按钮弹出菜单</li>
        </ol>
    </li>


    <li>
        菜单弹出后，上下键选择菜单项
        <ol>
            <li>或通过鼠标掠过</li>
        </ol>
    </li>

    <li>
        带有子菜单的菜单项通过右键激活子菜单，左键收缩子菜单
        <ol>
            <li>或通过鼠标掠过，自动弹出子菜单</li>
        </ol>
    </li>

    <li>
        菜单项弹出后，按下 enter 或 space 则选中当前高亮菜单项
        <ol>
            <li>或通过鼠标点击选中任意菜单项</li>
        </ol>
    </li>

    <li>
        esc 隐藏下拉菜单（焦点仍然在按钮上）
        <ol>
            <li>或通过鼠标点击文档空白区域（按钮失去焦点）</li>
        </ol>
    </li>
</ol>


<div id="button_container">

</div>
<br/><br/><br/><br/><br/>
<div id="log" style="height:300px;border:1px solid green;overflow:auto;">

</div>
<label>禁用：<input type="checkbox" id='dis'/></label>

<h2>从已知元素生成</h2>

<div id="exist">渐进增强</div>


<script src="/kissy/build/seed.js"></script>

<script src="../../../component/Control.js"></script>
<script src="../../../component/render.js"></script>
<script src="../../../??component/timer.js,component/extension.js"></script>

<script src="../../../button/base.js"></script>
<script src="../../../button/render.js"></script>
<script src="../../../button/nativerender.js"></script>
<script src="../../../button/css3render.js"></script>
<script src="../../../button/customRender.js"></script>
<script src="../../../button.js"></script>


<script src="../../../menu/menuitem-render.js"></script>
<script src="../../../menu/menuitem.js"></script>


<script src="../../../menu/submenu-render.js"></script>
<script src="../../../menu/submenu.js"></script>

<script src="../../../menu/menu-render.js"></script>
<script src="../../../menu/menu.js"></script>
<script src="../../../menu.js"></script>

<script src="../../baseRender.js"></script>
<script src="../../menubutton.js"></script>
<script src="../../../menubutton.js"></script>

<script>
    KISSY.use("node,menubutton,menu", function(S, Node, MenuButton,  Menu) {
        function log(s) {
            Node.one("#log").append(new Node("<p>" + s + "</p>"));
            Node.one("#log")[0].scrollTop = Node.one("#log")[0].scrollHeight;
        }

        (function() {
            var sb = new Menu();


            sb.addChild(new Menu.Item({content:"submenuitem1"}));
            sb.addChild(new Menu.Item({content:"submenuitem2",disabled:true}));


            var sb2 = new Menu();
            sb2.addChild(new Menu.Item({content:"submenuitem11"}));
            sb2.addChild(new Menu.Item({content:"submenuitem22"}));
            var b2 = new Menu.SubMenu({
                content:"sub-sub-menu",
                menu:sb2
            });
            sb.addChild(b2);

            var b = new Menu.SubMenu({
                content:"submenu",
                menu:sb
            });

            var menu = new Menu({
                children:[b, new Menu.Item({content:"alone"})]
            });
            //control
            //view as a parameter
            var bbbbb = new MenuButton({
                content:"测试",
                describedby:"describe",
                menu:menu,
                render:"#button_container"
            }).render();

            var dis = Node.one("#dis");

            dis.on("click", function() {
                if (dis[0].checked) {
                    bbbbb.set("disabled", true);
                } else {
                    bbbbb.set("disabled", false);
                }
            });

            if (dis[0].checked) {
                bbbbb.set("disabled", true);
            } else {
                bbbbb.set("disabled", false);
            }
        })();
        (function() {
            var sb = new Menu();
            sb.addChild(new Menu.Item({content:"submenuitem1"}));
            sb.addChild(new Menu.Item({content:"submenuitem2"}));


            var sb2 = new Menu();
            sb2.addChild(new Menu.Item({content:"submenuitem11"}));
            sb2.addChild(new Menu.Item({content:"submenuitem22"}));
            var b2 = new Menu.SubMenu({
                content:"sub-sub-menu",
                menu:sb2
            });
            sb.addChild(b2);

            var b = new Menu.SubMenu({
                content:"submenu",
                menu:sb
            });

            var menu = new Menu({
                children:[b,new Menu.Item({content:"alone"})]
            });
            var exist = new MenuButton({
                srcNode:"#exist",
                menu:menu
            }).render();

        })();


    });
</script>
</body>
</html>